<template>
    <el-tooltip :content="text" v-bind="$attrs" :disabled="isDisabled">
        <div class="clearOutline" :class="className" @mouseenter="isShowTooltip">{{ text }}</div>
    </el-tooltip>
</template>

<script>
export default {
    name: 'BaseTooltips',
    props: {
        text: {
            type: String,
            default: '',
            required: true
        },
        className: {
            type: String,
            default: 'g-line-1'
        }
    },
    data() {
        return {
            isDisabled: false
        }
    },
    methods: {
        isShowTooltip(e) {
            let clientWidth, scrollWidth, clientHeight, scrollHeight, result
            // 判断是否是一行显示隐藏，如果是，通过clientWidth和scrollWidth判断是否超出
            // 如果是多行，就用clientHeight和scrollHeight判断是否超出
            if (this.className.indexOf('g-line-1') !== -1) {
                clientWidth = e.target.clientWidth
                scrollWidth = e.target.scrollWidth
                result = scrollWidth > clientWidth
            } else {
                clientHeight = e.target.clientHeight
                scrollHeight = e.target.scrollHeight
                result = scrollHeight > clientHeight
            }
            // 超出显示tips
            this.isDisabled = !result
        }
    }
}
</script>

<style scoped>
.hover-blue:hover {
    color: blue;
}
.link-text {
    color: blue;
    cursor: pointer;
}
.clearOutline:focus {
    outline: none;
}
</style>
